<template>
	<view class="contain">
		<view class="title">
			课程管理
		</view>
		<scroll-view class="list" :scroll-y="true">

			<view class="now">
				现在的课程
			</view>
			<view class="" v-for="(item,index) in classes" v-if="!item.complete">
				<view class="item-title">
					<view class="time">
						{{item.start_time.replace('T',' ')}}
					</view>
					<view class="time">
						{{item.end_time.replace('T',' ')}}
					</view>
				</view>
				<view class="item" @click="showMore(index)">
					<view class="name">
						{{item.course.name}}
					</view>
					<view class="category">
						{{item.course.category}}
					</view>
					<view class="assessment">
						{{item.course.assessment}}
					</view>
				</view>
				<!-- <view v-show="item.isShow" class="more">

				</view> -->
				<view class="box">

				</view>
			</view>
			<view class="complete">
				<view class="box" @click="show=!show">
					结束的课程
				</view>
			</view>
			<view class="" v-for="(item,index) in classes" v-if="item.complete&&show">
				<view class="item-title">
					<view class="time">
						{{item.start_time.replace('T',' ')}}
					</view>
					<view class="time">
						{{item.end_time.replace('T',' ')}}
					</view>
				</view>
				<view class="item" @click="showMore(index)">
					<view class="name">
						{{item.course.name}}
					</view>
					<view class="category">
						{{item.course.category}}
					</view>
					<view class="assessment">
						{{item.course.assessment}}
					</view>
				</view>
				<!-- <view v-show="item.isShow" class="more">
			
				</view> -->
				<view class="box">

				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api

	export default {
		data() {
			return {
				classes: [],
				show: false
				// options: [{
				// 	text: '操作',
				// 	style: {
				// 		backgroundColor: '#f56c6c'
				// 	}
				// }]
			};
		},
		onLoad() {
		
			let token = uni.getStorageSync("token")
			
			api.getTeacherClass(token).then((res) => {

				if (res.code === 1) {
					this.classes = res.data
					// for (let i = 0; i < this.classes.length; i++) {
					// 	this.$set(this.classes[i], "isShow", false)
					// 	// console.log(this.classes[i])
					// }
				} else if (res.code === 0) {
					uni.showModal({
						content: res.errors
					})
				}


			}).catch(() => {

			})
		},
		methods: {
			// toScore(index) {
			// 	let id = this.classes[index].id
			// 	uni.navigateTo({
			// 		url: `/pages/teacher/score?id=${id}`
			// 	})

			// },
			showMore(index) {
				// console.log(this.classes[index].isShow)
				// this.classes[index].isShow = !this.classes[index].isShow
				// 显示班级详情
				// console.log(index)
				// console.log(this.classes[index].id)
				let id = this.classes[index].id
				let complete = this.classes[index].complete
				uni.navigateTo({
					url: `classItem?id=${id}`
				})
			}
		}
	}
</script>

<style lang="less">
	.contain {
		.title {
			height: 100px;
			line-height: 100px;
			background-color: #a62618;
			text-align: center;
			color: white;
			font-size: 25px;
		}

		.list {
			height: calc(100vh - 200px);

			.complete {
				display: flex;
				align-items: center;
				flex-direction: column;

				.box {
					text-align: center;
					width: 100px;
					height: 30px;
					line-height: 30px;
					border: none;
					box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.2);
					-webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.2);
					border-radius: 5px;
				}

			}

			.now {
				height: 40px;
				line-height: 40px;
				padding-left: 10px;
				border-bottom: #000000 1rpx solid;
				// background-color: #9ACAFC;
			}

			.item-title {
				height: 30px;
				line-height: 30px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					margin: 0 20rpx;
				}
			}

			.item {
				height: 60px;
				background-color: #E5E5E5;
				font-size: 11px;
				display: flex;
				align-items: center;
				// justify-content: space-between;

				.name {
					width: 450rpx;
					margin-left: 20rpx;
				}

				.category {
					width: 200rpx;
				}

				.assessment {
					width: 50rpx;
				}
			}

			.more {
				height: 100px;
				background-color: #FFECEC;
			}

			.box {
				height: 10px;

			}

		}
	}
</style>
